<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { getYufaNEironGApi } from '/api/request.js';
const props = defineProps({});
const platform = ref({});
const list = ref(null);
const query = ref({
    title: '',
    gc_id: ''
});
onLoad((e) => {
    query.value.title = e.title;
    query.value.gc_id = e.id;
});
onShow(async () => {
    platform.value = uni.getStorageSync('platform');
    let res = await getYufaNEironGApi(query.value);
    list.value = [];
    console.log(res);
    res.data.forEach((item) => {
        item.image = `http://zhangyu.aizhangyu.cn${item.image}`;
        list.value.push(item);
    });
});
const goback = () => {
    uni.navigateBack();
};
const showPage = (id) => {
    uni.navigateTo({
        url: '/pages/yufa/components/study?&id=' + id
    });
};
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> {{ query.title }} rtyu</view>
            <image
                style="opacity: 0"
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
        </view>
        <scroll-view
            scroll-y="true"
            :style="{ height: platform.gaodu - platform.dingbu - 96 + 'rpx' }"
        >
            <view class="body" v-if="list && list.length">
                <view
                    class="item uni-row"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="showPage(item.id)"
                >
                    <view class="left uni-row">
                        <image :src="item.image" class="icon"></image>
                        <view class="center">
                            <view class="titless">
                                {{ item.name }}
                            </view>
                            <view class="label">
                                语句 {{ item.grammar_count || 0 }} 个，已学
                                {{ item.learned || 0 }} 个，剩余
                                {{ Number(item.grammar_count) - item.learned }} 个
                            </view>
                        </view>
                    </view>
                    <view class="right uni-row"> 汇总强化 </view>
                </view>
            </view>
            <view class="nothing" v-if="list && list.length < 1">
                <image src="/static/img/nothing.png" class="img"></image>
                <view class="label"> 哎呀，这里什么内容都没有 </view>
            </view>
        </scroll-view>
    </view>
</template>

<style scoped lang="less">
.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .body {
        padding: 0 28rpx 40rpx;

        .item {
            justify-content: space-between;
            padding: 0 20rpx;
            height: 140rpx;
            background: #ffffff;
            border-radius: 16rpx;
            margin-bottom: 16rpx;

            .left {
                .icon {
                    width: 100rpx;
                    height: 100rpx;
                    margin-right: 24rpx;
                    border-radius: 16rpx;
                }

                .danci {
                    font-size: 32rpx;
                    color: #333333;
                }
            }

            .center {
                .titless {
                    font-size: 28rpx;
                    color: #333333;
                }

                .label {
                    margin-top: 10rpx;
                    font-size: 24rpx;
                    color: #999999;
                }
            }

            .right {
                justify-content: center;
                width: 106rpx;
                height: 40rpx;
                background: #e7e4f8;
                border-radius: 8rpx;
                font-size: 20rpx;
                color: #9893fd;
            }
        }
    }
}
</style>
